<script setup>
import { ref } from 'vue';

const selectedFruit = ref('');
const dropdownOpen = ref(false);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Dropdown Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Dropdown</h3>
        <div class="flex flex-col space-y-6">
          <div>
            <p class="mb-2">Standard Dropdown</p>
            <Dropdown
              v-model="selectedFruit"
              v-model:open="dropdownOpen"
              class="w-full"
            >
              <ListBox>
                <Option value="apple">Apple</Option>
                <Option value="banana">Banana</Option>
                <Option value="orange">Orange</Option>
                <Option value="mango">Mango</Option>
                <Option value="cherry">Cherry</Option>
              </ListBox>
            </Dropdown>
            <p class="mt-2">Selected fruit: {{ selectedFruit }}</p>
            <p class="mt-2">Dropdown open: {{ dropdownOpen }}</p>
          </div>

          <div>
            <p class="mb-2">With Placeholder</p>
            <Dropdown placeholder="Choose a fruit" class="w-full">
              <ListBox>
                <Option value="apple">Apple</Option>
                <Option value="banana">Banana</Option>
                <Option value="orange">Orange</Option>
                <Option value="mango">Mango</Option>
              </ListBox>
            </Dropdown>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Dropdown Variations</h3>

        <div class="mb-6">
          <h4 class="mb-2 text-sm font-medium">Appearance Variations</h4>
          <div class="mb-4">
            <p class="mb-1">Outline (Default)</p>
            <Dropdown
              appearance="outline"
              placeholder="Outline appearance"
              class="w-full"
            >
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>

          <div class="mb-4">
            <p class="mb-1">Filled Lighter</p>
            <Dropdown
              appearance="filled-lighter"
              placeholder="Filled lighter appearance"
              class="w-full"
            >
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>

          <div class="mb-4">
            <p class="mb-1">Filled Darker</p>
            <Dropdown
              appearance="filled-darker"
              placeholder="Filled darker appearance"
              class="w-full"
            >
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>

          <div class="mb-4">
            <p class="mb-1">Transparent</p>
            <Dropdown
              appearance="transparent"
              placeholder="Transparent appearance"
              class="w-full"
            >
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>
        </div>

        <div class="mb-6">
          <h4 class="mb-2 text-sm font-medium">Size Variations</h4>
          <div class="mb-4">
            <p class="mb-1">Small</p>
            <Dropdown size="small" placeholder="Small dropdown" class="w-full">
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>

          <div class="mb-4">
            <p class="mb-1">Medium (Default)</p>
            <Dropdown
              size="medium"
              placeholder="Medium dropdown"
              class="w-full"
            >
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>

          <div class="mb-4">
            <p class="mb-1">Large</p>
            <Dropdown size="large" placeholder="Large dropdown" class="w-full">
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>
        </div>
        <div class="mb-6">
          <h4 class="mb-2 text-sm font-medium">States</h4>
          <div class="mb-4">
            <p class="mb-1">Disabled</p>
            <Dropdown disabled placeholder="Disabled dropdown" class="w-full">
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>

          <div class="mb-4">
            <p class="mb-1">Required</p>
            <Dropdown required placeholder="Required dropdown" class="w-full">
              <ListBox>
                <Option value="option1">Option 1</Option>
                <Option value="option2">Option 2</Option>
              </ListBox>
            </Dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
